<template>
  <div v-loading="loading">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="name" label="科目" width="180"> </el-table-column>
      <el-table-column prop="number" label="题数" width="180">
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >添加</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="考试科目">
          <el-select v-model="form.name" placeholder="请选择活动区域">
            <div v-for="(item, index) in name" :key="index">
              <el-option :label="name[index]" v-model="name[index]"></el-option>
            </div>
          </el-select>
        </el-form-item>
        <el-form-item label="题目" :label-width="formLabelWidth">
          <el-input v-model="form.question" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选项A" :label-width="formLabelWidth">
          <el-input v-model="form.item1" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选项B" :label-width="formLabelWidth">
          <el-input v-model="form.item2" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选项C" :label-width="formLabelWidth">
          <el-input v-model="form.item3" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选项D" :label-width="formLabelWidth">
          <el-input v-model="form.item4" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="答案">
          <el-checkbox-group v-model="form.answer">
            <el-checkbox
              v-for="(item, index) in checkBoxItem"
              :label="checkBoxItem[index]"
              >{{ checkBoxItem[index] }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import tikuApi from "@/api/tiku/tiku";
export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {
        name: [],
        question: "",
        item1: "",
        item2: "",
        item3: "",
        item4: "",
        answer: [],
        loading: false,
      },
      formLabelWidth: "120px",
      name: [],
      checkBoxItem: ["A", "B", "C", "D"],
    };
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    getTiku: async function () {
      this.loading = true;
      let tiku = await tikuApi.getTiku();
      let data = tiku.data.data;
      for (let i = 2; i < data.length; i++) {
        let element = JSON.parse(data[i]);
        let number = element.title.length;
        let name = element.name;
        this.tableData.push({ name, number });
        this.name.push(name);
      }
      this.loading = false;
    },
    submit: async function () {
      let { answer, item1, item2, item3, item4, question, name } = this.form;
      let newAns = "";
      for (let i = 0; i < answer.length; i++) {
        const element = answer[i];
        newAns = newAns + element;
        if (i < answer.length - 1) {
          newAns = newAns + "+";
        }
      }
      answer = newAns;
      let insert = await tikuApi.insert({
        answer,
        item1,
        item2,
        item3,
        item4,
        question,
        name,
      });
      if (insert.code == 20000) {
        this.$message({
          message: "添加成功",
          type: "success",
        });
        setTimeout(() => {
          this.dialogFormVisible = false;
          window.location.reload();
        }, 2000);
      } else {
        this.$message.error("添加失败");
      }
    },
    handleClick: async function (e) {
      let { name, number } = e;
      console.log(name, number);
      this.form.name = name;
      this.form.question = number + 1 + ".";
      this.form.item1 = "A、";
      this.form.item2 = "B、";
      this.form.item3 = "C、";
      this.form.item4 = "D、";
      this.dialogFormVisible = true;
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.getTiku();
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>